<template>
  <a-layout-header
    v-if="!headerBarFixed"
    class="layout-header-bg"
    :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
    :style="{height:currentRouterPath == '/index/portal'||currentRouterPath == '/'?'110px':'50px',padding: '0' }">
    <!-- :style="{height:currentRouteName == '/index/portal'?'150px':'114px',padding: '0' }"> -->
    <!-- 最顶上 -->
    <!-- :style="{height:}" -->
    <div
     v-if="mode === 'sidemenu'" 
     class="header Global-header-flex-v" 
     :class="theme+' Global-header-flex-v'+bgImage" 
     :style="{backgroundSize:currentRouterPath == '/index/portal'||currentRouterPath == '/'?(windowInnerWidth>1920?'100% 110px !important':'110% 110px !important'):'100% 50px',
    //  background: 'linear-gradient(to right, #2F54EB 22%, #2F54EB 5%, #758df2) !important',
     backgroundPosition:'100% 100% !important',height:currentRouterPath == '/index/portal'||currentRouterPath == '/'?'110px':'50px',}" >
        <div :style="{display:'flex',alignItems:'center',flex: '1',paddingLeft:15+'px',}" v-if="currentRouterPath == '/index/portal'||currentRouterPath == '/'">
          <!-- <img src="../../assets/header-top.png" mode="widthFix" class="Global-header-flexleft" alt=""> -->
           <span style="font-size: 32px;color: #fff;font-weight: 600;" :style="{fontFamily:currentFamily}">特药专家审评系统</span>
          <!-- <img
           src="../../assets/header-left.png"
           mode="widthFix"
           class="Global-header-flexleft"
           :style="{width: firstSheet.width+'px',height: firstSheet.height+'px',}"
           alt=""> -->
           <!-- :style="{margin: 0 25px;}" -->
          <div style="flex: 1;display: flex;justify-content:center;" :style="{margin:windowInnerWidth>1675?'0':'0 25px'}">
            <img style="display: none;" src="../../assets/header-right.png" mode="widthFix" class="Global-header-flexleft" :style="{width: theSecond.width+'px',height:firstSheet.height+'px',}" alt="">
          </div>
            <!-- <ych-icon
            v-if="device==='mobile'"
            class="trigger"
            :type="collapsed ? 'menu-fold' : 'menu-unfold'"
            @click="toggle"></ych-icon>
            <img :src="logoUrl" class="logoImg" alt="logo">
            <span style="display:flex;justify-content:center;flex-direction:column;padding-left: 10px;text-align:left;font-weight:600;">
                <span style="font-size:1.6em;line-height:1.2em;letter-spacing: 0.3em;">xx壮族自治区食品药品审评查验中心</span>
                <span style="display: block;font-size:1.1em;line-height:1.2em;">GUANGXI CENTER FOR FOOD AND DRUG EVALUATION & INSPECTION</span>
            </span> -->
        </div>
        
        <div v-else style="flex: 1;text-align: left;padding-left: 8px;display: flex;align-items: center;">
          <img  src="../../assets/guohui-two-cdd.png" style="width: 45px;height: 45px;margin-top: 3px;margin-right: 8px;display: none;" alt="widthFix">
          <span @click="isSelectBox = !isSelectBox" style="font-size: 24px;font-weight: 700;color: #fff;text-shadow: rgb(67, 66, 66) 2px 2px 6px;" :style="{fontFamily:currentFamily}">特药专家审评系统</span>
          <!-- <a-select v-if="isSelectBox" v-model="currentFamily" style="width: 120px;margin-left: 15px;" @change="familyHandleChange">
            <a-select-option value="幼圆">幼圆</a-select-option>
            <a-select-option value="微软雅黑">微软雅黑</a-select-option>
            <a-select-option value="宋体">宋体</a-select-option>
            <a-select-option value="仿宋">仿宋</a-select-option>
            <a-select-option value="黑体">黑体</a-select-option>
            <a-select-option value="楷体">楷体</a-select-option>
            <a-select-option value="行楷">行楷</a-select-option>
          </a-select> -->
        </div>
        <!-- <span v-if="device === 'desktop'" class="headerTitle-fangzhen">科学规范 公开公正 高效廉洁 持续改进</span> -->
        <!-- <span v-if="device === 'desktop'" class="headerTitle-fangzhen"></span> -->
        <!-- <img src="../../assets/header-background2.png" class="headerTitle-fangzhen" alt=""> -->
      <!-- <ych-icon
        v-else
        class="trigger"
        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
        @click="toggle"/> -->

      <!-- <span v-if="device === 'desktop'">{{fullName}}</span>
      <span v-else>{{simplyName}}</span> -->
      <!-- :style="{width: realname == 'admin'?'200px':'150px',}" -->

      <user-menu :theme="theme" @reloadPortlet="$emit('reloadPortlet')" id="top-right-user-menu"/>
      <div style="width: 70px;" :style="{height: currentRouterPath == '/index/portal'||currentRouterPath == '/'?'110px':'50px'}" ></div>
      <!-- <img id="top-right-yp-img" src="../../assets/left_yp_tu.png" alt="" style="height: 110px;"> -->
    </div>
    <div v-else-if="mode === 'topsidemenu'" :class="['top-nav-header-index', theme]">

      <div class="header-index-wide">
        <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
          <ych-icon
            v-if="device==='mobile'"
            class="trigger"
            :type="collapsed ? 'menu-fold' : 'menu-unfold'"
            @click="toggle"></ych-icon>
          <ych-icon
            v-else
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="toggle"/>
          <div v-if="device !== 'mobile'" :style="topMenuStyle.topSmenuStyle">
            <s-menu
              mode="horizontal"
              :menu="firstMenus"
              :theme="theme"></s-menu>
          </div>
        </div>
        <user-menu class="header-index-right" :theme="theme" :style="topMenuStyle.headerIndexRight" @reloadPortlet="$emit('reloadPortlet')"/>
      </div>
    </div>
    <!-- 顶部导航栏模式 -->
    <div v-else :class="['top-nav-header-index', theme]">
      <div class="header-index-wide">
        <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
          <logo class="top-nav-header" :show-title="device !== 'mobile'" :style="topMenuStyle.topNavHeader"
                :indexName="0" :theme="theme"/>
          <div v-if="device !== 'mobile'" :style="topMenuStyle.topSmenuStyle">
            <s-menu
              mode="horizontal"
              :menu="menus"
              :theme="theme"></s-menu>
          </div>
          <ych-icon
            v-else
            class="trigger"
            :type="collapsed ? 'menu-fold' : 'menu-unfold'"
            @click="toggle"></ych-icon>
        </div>
        <user-menu class="header-index-right" :theme="theme" :style="topMenuStyle.headerIndexRight" @reloadPortlet="$emit('reloadPortlet')"/>
      </div>
    </div>

  </a-layout-header>
</template>

<script>
  import UserMenu from '../tools/UserMenu'
  import SMenu from '../menu'
  import store from '../../store'
  import Logo from '../tools/Logo'

  import { mixin } from '@/utils/mixin.js'

  export default {
    name: 'GlobalHeader',
    components: {
      UserMenu,
      SMenu,
      Logo
    },
    mixins: [mixin],
    props: {
      mode: {
        type: String,
        // sidemenu, topmenu
        default: 'sidemenu'
      },
      menus: {
        type: Array,
        required: true
      },
      firstMenus:{
        type: Array,
        required: true
      },
      theme: {
        type: String,
        required: false,
        default: 'dark'
      },
      collapsed: {
        type: Boolean,
        required: false,
        default: false
      },
      device: {
        type: String,
        required: false,
        default: 'desktop'
      }
    },
    data() {
      return {
        headerBarFixed: false,
        topMenuStyle: {
          headerIndexLeft: {},
          topNavHeader: {},
          headerIndexRight: {},
          topSmenuStyle: {}
        },
        realname:store.getters.userInfo.username,
        simplyName: window._CONFIG.simply_name  || this.$t('m.logo.simply_name'),
        fullName: window._CONFIG.full_name  || this.$t('m.logo.full_name'),
        logoUrl: window._CONFIG.logo_url || process.env.BASE_URL + 'logo.svg',
        windowInnerWidth:window.innerWidth,
        windowInnerHeight:window.innerHeight - 80 - 120,
        userMenuWidth:0,
        imageWidth:1270,
        firstSheet:{
          width:570,
          height:110,
        },
        theSecond:{
          width:750,
          height:110,
        },
        bgImage:0,
        displayBtn:false,
        currentFamily:'楷体',
        isSelectBox:false,
      }
    },
    computed: {
        currentRouteName(){
          return this.$store.state.permission.currentRouteName
        },
        currentRouterPath(){
          //console.log('当前路由',this.$store.state.user.currentRouterPath)
          return this.$store.state.user.currentRouterPath
        },
    },
    watch: {
      /** 监听设备变化 */
      device() {
        if (this.mode === 'topmenu' || this.mode === 'topsidemenu') {
          this.buildTopMenuStyle()
        }
      },
      /** 监听导航栏模式变化 */
      mode(newVal) {
        if (newVal === 'topmenu' || this.mode === 'topsidemenu') {
          this.buildTopMenuStyle()
        }
      },
      $route(val) {
      //console.log('获取当前路由',val.path)
      this.$store.commit('SET_CURRENTROUTERPATH',val.path)
        if(val){
            this.$store.dispatch("UpdateCurrentRouteName", val.fullPath)
        }

      },
      userMenuWidth(val){
        if(val){
          //console.log('我是头部，我在变化',val)
          //头部两张图片的总宽度
          // this.imageWidth = Math.ceil(this.windowInnerWidth - 30 - 50 - val)
          // if(this.windowInnerWidth < 1545){
          //   this.firstSheet.width = Math.ceil(this.imageWidth * 0.44)
          //   this.firstSheet.height = Math.ceil((this.imageWidth * 0.44) * 0.16)
          //   this.theSecond.width = Math.ceil(this.imageWidth * 0.55)
          //   this.theSecond.height = Math.ceil((this.imageWidth * 0.55) * 0.14)
          // }

        }
      },
      windowInnerWidth(val){

      }
    },
    created(){

    },
    mounted() {
      window.addEventListener('scroll', this.handleScroll)
      if (this.mode === 'topmenu' || this.mode === 'topsidemenu') {
        this.buildTopMenuStyle()
      }
      this.$nextTick(()=>{
          if(!this.userMenuWidth){
            this.userMenuWidth = document.getElementById('top-right-user-menu').offsetWidth + 70
            this.imageWidth = Math.ceil(this.windowInnerWidth - 50 -15 - this.userMenuWidth)
            if(this.windowInnerWidth < 1675){
              this.firstSheet.width = Math.ceil(this.imageWidth * 0.44)
              this.firstSheet.height = Math.ceil((this.imageWidth * 0.44) * 0.18)
              this.theSecond.width = Math.ceil(this.imageWidth * 0.55)
              this.theSecond.height = Math.ceil((this.imageWidth * 0.55) * 0.16)
            }
          }
      })
      window.addEventListener('resize',this.handleWidth)
    },
    methods: {
      familyHandleChange(val){
        this.currentFamily = val
      },
      handleWidth(){
          this.windowInnerWidth = window.innerWidth
          if(this.userMenuWidth){
            
            //console.log('this.userMenuWidth右侧宽度',this.userMenuWidth)
            this.imageWidth = Math.ceil(this.windowInnerWidth - 50 - 15 - this.userMenuWidth)
            if(this.windowInnerWidth < 1675){
              this.firstSheet.width = Math.ceil(this.imageWidth * 0.44)
              this.firstSheet.height = Math.ceil((this.imageWidth * 0.44) * 0.18)
              this.theSecond.width = Math.ceil(this.imageWidth * 0.555)
              this.theSecond.height = Math.ceil((this.imageWidth * 0.555) * 0.16)
            }
          }
      },
      handleScroll() {
        if (this.autoHideHeader) {
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          if (scrollTop > 100) {
            this.headerBarFixed = true
          } else {
            this.headerBarFixed = false
          }
        } else {
          this.headerBarFixed = false
        }
      },
      toggle() {
        this.$emit('toggle')
      },
      buildTopMenuStyle() {
        if (this.mode === 'topmenu' || this.mode === 'topsidemenu') {
          if (this.device === 'mobile') {
            // 手机端需要清空样式，否则显示会错乱
            this.topMenuStyle.topNavHeader = {}
            this.topMenuStyle.topSmenuStyle = {}
            this.topMenuStyle.headerIndexRight = {}
            this.topMenuStyle.headerIndexLeft = {}
          } else {
            if(this.mode === 'topmenu'){
              let rightWidth = '430px'
              this.topMenuStyle.topNavHeader = { 'min-width': '165px' }
              this.topMenuStyle.topSmenuStyle = { 'width': 'calc(100% - 165px)' }
              // this.topMenuStyle.headerIndexRight = { 'min-width': rightWidth }
              this.topMenuStyle.headerIndexRight = {}
              this.topMenuStyle.headerIndexLeft = { 'width': `calc(100% - ${rightWidth})` }
            }else{
              let rightWidth = '430px'
              this.topMenuStyle.topNavHeader = { 'min-width': '60px' }
              this.topMenuStyle.topSmenuStyle = { 'width': 'calc(100% - 60px)' }
              // this.topMenuStyle.headerIndexRight = { 'min-width': rightWidth }
              this.topMenuStyle.headerIndexRight = {}
              this.topMenuStyle.headerIndexLeft = { 'width': `calc(100% - ${rightWidth})` }
            }

          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  @height: 110px;

  .layout {

    .top-nav-header-index {

      .header-index-wide {
        margin-left: 10px;

        .ant-menu.ant-menu-horizontal {
          height: @height;
          line-height: @height;
        }
      }
      .trigger {
        line-height: 64px;
        color: #FFFFFF;
        &:hover {
          background: rgba(0, 0, 0, 0.05);
        }
      }
    }

    .header {
      z-index: 2;
      color: white;
      height: @height;
      background-color: @primary-color;
      transition: background 300ms;
      text-align: center;

      /* dark 样式 */
      &.dark {
        color: #000000;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        background-color: white !important;
      }
    }

    .header, .top-nav-header-index {
      &.dark .trigger:hover {
        background: rgba(0, 0, 0, 0.05);
      }
    }
  }

  .ant-layout-header {
    // height: @height;
    // line-height: @height;
    background: #f0f2f5 !important;
  }
  .headerTitle-fangzhen {
    // font-family: cursive;
    // font-size: 3.4em;
    width: 55%;
    height: 50px;
    // background-image: url('../../assets/header-background.png');
    background-size: cover;
    // background-position: 0 -310px;
    // background-size: 100%;
    // text-shadow: -1px 1px #bbb,
    //         -2px 2px #bbb,
    //         -3px 3px #bbb,
    //         -4px 4px #bbb,
    //         -10px 10px 3px #ccc;
                // text-shadow:rgba(0, 0, 0, 0.5) 3px 4px 5px
    // text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),-4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8),-6px -6px rgba(197, 223, 248,0.8);
  }
  .logoImg {
    width: 80px;
    height: 80px;
    float:inline-start;
    margin: 20px 0px 20px 20px;
  }
  .Global-header-flex-v{
    height: 110px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px !important;
    /**  后加 **/
    // -webkit-box-align: start;
    // display: -webkit-box;
    // background: url(../../assets/top_bg_a.jpg) repeat-x !important;
    background-image: url(../../assets/layout-header-bg.jpg)  !important;
    background-repeat: no-repeat !important;
    // background-position:right bottom;
    background-size: 100% 110px !important;
    // background-size:cover;
    clear: both;
  }
  .Global-header-flex-v1{
    background-image: url(../../assets/layout-header-bg1.jpg)  !important;
  }
  .Global-header-flex-v2{
    background-image: url(../../assets/layout-header-bg2.jpg)  !important;
  }
  .Global-header-flexleft {
    // background-image: url('../../assets/header-background3.png');
    // background-position: center;
    // height: 100%;
    // background-repeat: no-repeat;
    // padding-top: 10px;
    // padding-left: 10px;
    // width: 100%;
    height: 110px;
  }
// .layout-header-bg{
//   background:url('../../assets/layout-header-bg.jpg') no-repeat ;
// }
</style>
